
window.addEventListener('load', function () {
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focuswWidth = focus.offsetWidth;
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = "block";
        clearInterval(timer);
        timer = 'null';
    })
    focus.addEventListener("mouseleave", function () {
        arrow_l.style.display = "none";
        arrow_r.style.display = "none";
        timer = setInterval(function () {
            // 手动调用点击事件
            arrow_r.click();
        }, 2000);
    })
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i < ul.children.length; i++) {
        var li = this.document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            // 当我们点击了某个li就要把这个li的索引号给num
            num = index;
            circle = index;
            // 点击小圆圈，移动图片 当然移动的是ul
            // ul的移动距离 小圆圈的索引号 乘以图片的宽度 注意是负值

            animate(ul, -index * focuswWidth)
        })
    }

    ol.children[0].className = 'current';
    // 克隆第一张图片，放到最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 点击右侧按钮，图片滚动一张
    var num = 0;
    // circle控制小圆圈的播放 
    var circle = 0;
    // flag节流阀
    var flag = true;
    arrow_r.addEventListener('click', function () {

        if (flag) {
            flag = false;
            // 如果走到了最后的复制一张图片
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focuswWidth, function () {
                flag = true;
            });
            // 点击右侧按钮，小圈圈跟随一起变化  可以再声明一个变量控制小圆圈的播放
            circle++;
            // 如果circle=4说明走到最后我们这张复制的照片
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    })
    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false;
            // 如果走到了最后的复制一张图片
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focuswWidth + 'px';

            }
            num--;
            animate(ul, -num * focuswWidth, function () {
                flag = true;
            });
            // 点击右侧按钮，小圈圈跟随一起变化  可以再声明一个变量控制小圆圈的播放
            circle--;
            // 如果circle<0说明第一张照片，则小圆圈要改为第四个小圆圈(3)
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circleChange();
        }
    })
    function circleChange() {
        // 先清除小圆圈的current类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留下当前小圆圈的类名
        ol.children[circle].className = 'current';
    }
    // 自动播放
    var timer = setInterval(function () {
        // 手动调用点击事件
        arrow_r.click();
    }, 2000);
    // var nav = this.document.querySelector('.nav');
    var navTop = $('.nav').offset().top;
    // var top = document.querySelector(".top");
    // var rightside = document.querySelector('.rightside');
    // var hearder_bottom = this.document.querySelector('.header_bottom');
    toggleTool();
    function toggleTool() {
        if ($(document).scrollTop() >= navTop) {
            $('.rightside').fadeIn()
        } else {
            $('.rightside').fadeOut()
        }
    }
    $(window).scroll(function () {
        toggleTool();
    })
    $('.toop').click(function () {
        $("body,html").stop().animate({
            scrollTop: 0
        })
    })
    $(".rightside a").click(function () {
        var ctt = $(".floor .ani").eq($(this).index()).offset().top;
        $("body,html").stop().animate({
            scrollTop: ctt
        })
    })
 
    $(".mask").fadeOut(0);
    $(".add").fadeOut(0);
    var time;
    $(".floor span").click(function () {
        $(".add").fadeIn(1000);
        $(".mask").fadeIn(1000);
        clearInterval(time);
        time = setInterval(function () {
            $(".mask").fadeOut();
            $(".add").fadeOut();
        }, 3000);

    })
    
    $("#shopcar,#cut").click(function () {
        $(".settle").fadeIn(1000);
        $(".mask1").fadeIn(1000);
   
    })
    $("#del").click(function () {
        $(".settle").fadeOut(1000);
        $(".mask1").fadeOut(1000);
    })
})
// $(".checkAll").change(function () {
    //     // $(this).prop("checked");
    //     $(".check").prop("checked", $(this).prop("checked"));
    // });
    // $(".check").change(function () {
    //     if ($(".check:checked").length == $(".checkAll").children.length) {
    //         $(".checkAll").prop("checked", true);
    //     } else {
    //         $(".checkAll").prop("checked", false);
    //     }
    // });